<html>
<head>
    <title>jQuery XClone Demo</title>
    <style>
#top {
    font-size: 1.2em;
}
#left {
    width: 50%;
    text-align: left;
}
#right {
    float: right;
    text-align: right;
}
.box {
    margin: 0px 5px;
    padding: 5px;
    border: 1px dotted black;
}
table {
    width: 100%;
}
.row td {
    border: 1px solid #999999;
}
th {
    border-bottom: 1px solid black;
}
    </style>
    <script type="text/javascript" src="../../jquery.1.3.2.js"></script>
    <script type="text/javascript" src="../jquery.values.js"></script>
    <script type="text/javascript" src="jquery.xclone.js"></script>
    <script type="text/javascript" src="../../other/log/log.js"></script>
    <script type="text/javascript">
$(function() {
    // Here's the 5 typical uses
    // simple xclone with values
    $('.addNow').click(function() {
        var vals = $('#source').values();
        $('.row').xclone(vals);
        log('added row:', vals);
    });
    // multiple xclones from array of values
    $('.addSaved').click(function() {
        $('.row').xclone(store);
        log('added rows:', store);
        store = [];
        $('#count').text('0');
    });
    // multiple xclones w/same values
    $('.addCopies').click(function() {
        var vals = $('#source').values(),
            num = $('#left').values('copies');
        $('.row').xclone(vals, { count: num });
        log('added rows:', vals);
    });
    // multiple xclones w/no values
    $('.addBlanks').click(function() {
        // must parse int to send right type as direct arg
        var count = parseInt($('#left').values('blanks'));
        $('.row').xclone(count);
        log('added', count, 'blank rows');
    });

    // save values in array for later add
    var store = document.store = [];
    $('.save').click(function() {
        store.push($('#source').values());
        $('#count').text(store.length);
        log('saved values:', store);
    });
    // remove all rows to show that you can
    // still make new xclones, since the original is
    // independently saved in the context element's data
    $('.clear').click(function() {
        $('.row').remove();
        log('removed all rows');
    });

    // hide the original by simply marking as an xclone
    $('.row').xclone();
});
    </script>
</head>
<body>
<div id="top" class="box">
    Enter/alter values on the right, then push the buttons to affect the table
    on the left.  The thing being "xcloned" in various ways is the row in the table.
    The source for this page has more explanation (both code and comments).
</div>
<br clear="all">
<div id="right" class="box">
    <table>
    <thead>
    <tr>
        <th>#</th>
        <th>a</th>
        <th>b</th>
        <th>c</th>
    </tr>
    </thead>
    <tbody>
    <tr class="row">
        <!-- this is automatically available metadata -->
        <td>
            <span name="xcloneTotal"></span>/<span name="xcloneInSet">0</span>
        </td>
        <td name="a"></td>
        <td name="b"></td>
        <td name="c"></td>
    </tr>
    </tbody>
    </table>
    <button class="clear">Clear</button>
</div>
<div id="left" class="box">
    <div id="source">
        <label for="a">a:</label>
        <input type="text" name="a" value="one"><br>
        <label for="b">b:</label>
        <select multiple="true" name="b">
            <option>two</option>
            <option selected="true">three</option>
            <option>four</option>
        </select><br>
        <label for="c">c:</label>
        5<input type="checkbox" name="c" value="five">
        6<input type="checkbox" name="c" value="six">
        7<input type="checkbox" name="c" value="seven" checked="true">
    </div>
    <button class="addNow">Add</button>
    <button class="save">Save</button>
    <button class="addSaved">Add <span id="count">0</span> Saved</button>
    <br>
    <button class="addCopies">Add Copies:</button>
    <input type="text" size="2" name="copies" value="2">
    <br>
    <button class="addBlanks">Add Blanks:</button>
    <input type="text" size="1" name="blanks" value="3">
</div>
</body>
</html>